<template>
  <ul class="flex">
    <ScrollNum
      v-for="(num, idx) of numArr"
      :key="idx"
      as="li"
      :i="num"
      :delay="idx + 1"
    />
  </ul>
</template>

<script>
import ScrollNum from "./components/ScrollNum.vue";
import { computed, defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  name: "App",
  components: { ScrollNum },
  setup() {
    const state = reactive({
      num: 999,
    });

    const numArr = computed(() => {
      const str = String(state.num);
      let arr = [];
      for (let i = 0; i < str.length; i++) {
        arr.push(parseInt(str[i]));
      }
      return arr;
    });

    return {
      ...toRefs(state),
      numArr,
    };
  },
});
</script>

<style scoped>
.flex {
  display: flex;
  justify-content: center;
  align-items: center;
}
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}
</style>